<template>
  <div class="login-modal-view">
    <view class="pop-container">
      <view class="account-view">
        <view class="input-container">
          <view class="item-box divider"><text class="left-label">手机号：</text>
            <uni-easyinput class="input-view" v-model="mobile" :focus="phoneState" placeholder="请输入手机号" :inputBorder="true"
              :styles="styles" :placeholderStyle="placeholderStyle" @mousedown="onPhoneInputMouseDown"></uni-easyinput>
          </view>
          <view class="item-box"><text class="left-label">验证码：</text>
            <uni-easyinput class="input-view" :focus="verifyCodeState" v-model="verifyCode" maxlength="6" placeholder="请输入验证码"
              :inputBorder="true" type="number" :styles="styles" :placeholderStyle="placeholderStyle" @mousedown="onVerifyInputMouseDown"></uni-easyinput>
            <button class="verify-code" type="default" plain="true" size="mini" @click="onClickSendCode" :disabled="countDownTime > 0"> {{
                countDownTime == 0 ? '发送验证码' : countDownTime + 's'
            }} </button>
          </view>
        </view>

        <view class="login-button" @click="login">
          <text>登录</text>
        </view>
      </view>
    </view>
  </div>
</template>

<script>

import { API, request } from '../../common/request';

export default {
  name: "login-modal-view",
  props: {

  },
  data() {
    return {
      styles: {
        color: "#333",
        "font-size": "1rem",
      },
      mobile: "",
      verifyCode: "",
      countDownTime: 0,
      placeholderStyle: "font-size:1rem",
      phoneState: true,
      verifyCodeState: false,

    }
  },
  computed: {},
  methods: {
    onPhoneInputMouseDown() {
      console.log('onInputMouseDown');
      this.phoneState = true;
      this.verifyCodeState = false;
    },  

    onVerifyInputMouseDown() {
      console.log('onVerifyInputMouseDown');
      this.verifyCodeState = true;
      this.phoneState = false;
    },

    onClickSendCode() {
      this.verifyCodeState = false;
      this.phoneState = false;
      if (this.mobile == "") {
        console.log('onClickSendCode请输入电话号码')
        uni.showToast({ title: "请输入电话号码"});
        return;
      }
      this.countDownTime = 60;
      request({
        path: API.LOGIN_FETCH_PHONE_CODE,
        params: { user_phone: this.mobile },
      }).then((data) => {
        if (data.isSuccess) {
          this.countDown();
        } else {
          this.countDownTime = 0;
        }
      });
    },
    countDown() {
      var _this = this;
      setTimeout(function () {
        _this.countDownTime = _this.countDownTime - 1;
        if (_this.countDownTime > 0) {
          _this.countDown();
        }
      }, 1000);
    },

    login() {
      this.verifyCodeState = false;
      this.phoneState = false;
      if (this.mobile == "") {
        uni.showToast({ title: "请输入电话号码"});
        return;
      }

      if (this.verifyCode == "") {
        uni.showToast({ title: "请填写验证码"});
        return;
      }
      request({
        path: API.LOGIN_PHONE_LOGIN,
        params: {
          user_phone: this.mobile,
          code: this.verifyCode,
        },
      }).then((data) => {
        if (data.isSuccess) {
          uni.setStorageSync("token", data.data.token);
          var userInfo = this.$store.state.userInfo
          userInfo.isLogin = true;
          this.$store.commit("SET_USER_INFO",userInfo)
        }
      });
    },
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() { },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() { },
  // 组件周期函数--监听组件数据更新之后
  updated() { },
  // 组件周期函数--监听组件激活(显示)
  activated() { },

  deactivated() { },

  beforeDestroy() { },
}
</script>

<style lang="scss">
.pop-container {
  position: fixed;
  background-color: rgba(96, 94, 94, 0.585);
  border-radius: 20rpx;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.account-view {
  width: 400px;
  height: 350px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.item-box {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  // height: 90rpx;
  padding: 0 10rpx;

  .left-label {
    width: 170rpx;
    font-size: 1rem;
    font-weight: bold;
  }

  .verify-code {
    margin-left: 5px;
    align-self: center;
  }
}

.divider {
  border-bottom: 1px solid #f5f5f5;
}

.input-view {
  // background-color: red;
  width: 200px;
  // height: 45px;
}

.login-button {
  align-self: center;
  justify-self: center;
  margin-top: 10px;
  padding: 8px 30px 8px 30px;
  background-color: lightblue;
  border-radius: 8px;
  color: white;
  font-size: 1rem;
}

.input-container {
  display: flex;
  flex-direction: column;
  padding: 20px 15px 20px 15px;
}
</style>